<template>
	<view class="quotationRecord">
		<view class="loading" v-if="pagingState.loading">
			<image mode="widthFix" src="@/static/image/loading.gif"></image>
		</view>
		<view class="no-person" v-else-if="recordList.length === 0">
			暂无报价记录
		</view>
		<template v-else>
			<view class="list">
				<view class="item" v-for="item of recordList" :key="item.id" @click="toDetail(item)">
					<view class="content">
						<view class="image-box" v-if="item.image">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="default-box" v-else>
							<image mode="widthFix" src="@/static/image/default.png"></image>
						</view>
						<view class="rows">
							<view class="name-row">
								<text>{{item.product_name}}</text>
								<image mode="heightFix" src="@/static/image/arrow-right.png"></image>
							</view>
							<!-- <view class="tags">
								<view class="tag-box" v-for="itemY of item.tags" :key="itemY">
									<view class="tag">{{itemY}}</view>
								</view>
							</view> -->
							<view class="price">
								<text>报价金额(元)</text>
								<text>{{numFormat(item.amount)}}</text>
							</view>
						</view>
					</view>
					<view class="slider"></view>
					<view class="footer">
						<text>{{item.create_date}}</text>
						<text>数量(个) {{numFormat(item.quantity)}}</text>
					</view>
				</view>
			</view>
			<view class="loading_more" v-if="pagingState.loading_more">
				<text>加载中...</text>
				<image mode="widthFix" src="@/static/image/loading.gif"></image>
			</view>
			<view class="noMore" v-if="!pagingState.hasMore">
				<text>没有更多了~</text>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		quotationRecordList,
	} from "@/api/search_read.js";
	import _ from "lodash";
	export default {
		data() {
			return {
				// 记录列表
				recordList: [],
				// 分页状态
				pagingState: {
					// 页码
					page: 1,
					// 每页条数
					limit: 20,
					// 总条数
					total: 0,
					// 还有更多
					hasMore: true,
					// 加载中
					loading: true,
					// 加载更多中
					loading_more: false,
				}
			}
		},
		onPullDownRefresh() {
			this.refresh();
		},
		onReachBottom: _.debounce(async function() {
			// 加载中时不在发起加载
			if (this.pagingState.loading_more || !this.pagingState.hasMore) {
				return;
			}
			this.pagingState.loading_more = true;
			await this.getList();
			this.$nextTick(() => {
				this.pagingState.loading_more = false;
			})
		}, 1000, {
			leading: false,
			trailing: true
		}),
		onLoad() {
			this.refresh();
		},
		methods: {
			// 刷新列表
			async refresh() {
				this.pagingState.page = 1;
				this.pagingState.total = 0;
				this.recordList = [];
				this.pagingState.hasMore = true;
				this.pagingState.loading = true;
				await this.getList();
				this.pagingState.loading = false;
				uni.stopPullDownRefresh();
			},
			// 获取记录列表
			async getList() {
				if (!this.pagingState.hasMore) {
					return Promise.reject(false);
				}
				return new Promise((resolve) => {
					quotationRecordList({
						limit: this.pagingState.limit,
						offset: this.pagingState.limit * (this.pagingState.page - 1),
					}).then(res => {
						if (res.data?.result) {
							this.pagingState.total = res.data?.result?.length || 0;
							this.recordList = this.recordList.concat(res?.data?.result?.records.map(x => {
								x.image = x.image_256 ? this.image_base64(x.image_256) : '';
								x.product_name = x.product_id?.[1] || '/';
								let create_date = new Date(x.create_date.replace(/\-/g, "/"));
								create_date = create_date.setHours(create_date.getHours() + 8);
								x.create_date =
									`${new Date(create_date).getFullYear()}-${String(new Date(create_date).getMonth() + 1).padStart(2,'0')}-${String(new Date(create_date).getDate()).padStart(2,'0')} ${String(new Date(create_date).getHours()).padStart(2,'0')}:${String(new Date(create_date).getMinutes()).padStart(2,'0')}:${String(new Date(create_date).getSeconds()).padStart(2,'0')}`;
								return x;
							}));
							if (this.recordList.length === this.pagingState.total) {
								this.pagingState.hasMore = false;
							} else {
								this.pagingState.page++;
							}
						} else {
							uni.showModal({
								title: '错误提示',
								content: res?.data?.error?.data?.message || '获取报价记录列表失败',
							})
						}
					}).catch(() => {
						uni.showToast({
							icon: 'none',
							title: '系统错误',
						})
					}).finally(() => {
						resolve(true);
					})
				})
			},
			image_base64(photo) {
				return 'data:image/jpeg;base64,' + photo;
			},
			// 默认头像
			getDefaultImage() {
				return require("@/static/image/avatar-default.png");
			},
			// 数字千分位,分割
			numFormat(num) {
				let res = num.toString().replace(/\d+/, function(n) { // 先提取整数部分
					return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
						return $1 + ",";
					});
				})
				return res;
			},
			// 跳转详情页
			toDetail: _.debounce(function(item) {
				uni.navigateTo({
					url: `/pages/quotationRecordDetail/quotationRecordDetail?id=${item.id}`
				})
			}, 300),
		},
	}
</script>

<style lang="scss" scoped>
	.quotationRecord {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.loading,
		.no-person {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: $uni-font-size-lg;

			image {
				width: 50rpx;
			}
		}

		.list {
			width: 100%;
			padding: 36rpx 24rpx;
			box-sizing: border-box;

			.item {
				width: 100%;
				background-color: white;
				border-radius: 20rpx;

				&:not(:first-child) {
					margin-top: 40rpx;
				}

				.content {
					width: 100%;
					padding: 24rpx;
					box-sizing: border-box;
					display: flex;

					.image-box {
						flex-shrink: 0;
						width: 180rpx;
						height: 180rpx;

						image {
							width: 180rpx;
							height: 180rpx;
						}
					}

					.default-box {
						flex-shrink: 0;
						width: 180rpx;
						height: 180rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: $uni-bg-color;

						image {
							width: 36rpx;
						}
					}

					.rows {
						flex: 1;
						padding-left: 28rpx;
						display: flex;
						flex-direction: column;

						.name-row {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							text {
								flex: 1;
								padding: 0 6rpx;
								font-size: 32rpx;
								color: #34353A;
								line-height: 36rpx;
								word-break: break-all;
							}

							image {
								height: 36rpx;
								margin-left: 10rpx;
							}
						}

						// .tags {
						// 	margin-top: 20rpx;
						// 	width: 100%;
						// 	display: flex;
						// 	flex-wrap: wrap;

						// 	.tag-box {
						// 		padding: 6rpx;

						// 		.tag {
						// 			padding: 6rpx 16rpx;
						// 			border-radius: 10rpx;
						// 			background-color: #F0F4FE;
						// 			font-size: 24rpx;
						// 			line-height: 1;
						// 			color: #3F7CFB;
						// 		}
						// 	}
						// }

						.price {
							margin-top: auto;
							width: 100%;
							display: flex;
							justify-content: flex-end;
							align-items: flex-end;

							text {
								line-height: 1;

								&:nth-child(1) {
									font-size: 28rpx;
									color: #3F7CFB;
									margin-right: 10rpx;
								}

								&:nth-child(2) {
									font-size: 42rpx;
									color: #3F7CFB;
								}
							}
						}
					}
				}

				.slider {
					width: 640rpx;
					height: 1px;
					background-color: #F7F7FB;
					margin: 0 auto;
				}

				.footer {
					width: 100%;
					padding: 32rpx 24rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						&:nth-child(1) {
							font-size: 24rpx;
							color: #999;
						}

						&:nth-child(2) {
							font-size: 28rpx;
							color: black;
						}
					}
				}
			}
		}

		.loading_more {
			width: 100%;
			padding: 10rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: $uni-font-size-sm;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}

		.noMore {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: $uni-font-size-sm;
			}
		}
	}
</style>